<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="css/index.css">
    <script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
    <script src="https://cdn.bootcss.com/axios/0.19.0-beta.1/axios.js"></script>


</head>
<body>
    <div class="frame">
        <div class="content">
           <input type="text" v-model="keyword" class="search">
           <button @click="handleClick" class="but">搜索音乐</button>
            <img src="images/music.jpg" alt="" class="pic">
            <h4>{{keyword}}</h4>
            <audio :src="musicUrl" controls loop autoplay>

            </audio>
           
        </div>
    </div>
    <script>
        new Vue({
            el:"#app",
            data:{
                keyword:"",
                musicUrl:"",

            },
            methods:{
                // 1.通过Click时间，获取input的值
                handleClick:async function(){
                    console.log(this.keyword)
                    // 2.发送网络请求获取URL
                    // https://music.aityp.com/search?keywords=${keyword}&limit=1
                    var url = `https://music.aityp.com/search?keywords=${this.keyword}&limit=1`;
                    var data = await axios.get(url);
                    console.log(data.data.result.songs[0].id);
                    // 3.获取音乐的ID
                    var id=data.data.result.songs[0].data
                    console.log(id)
                    // 4.根据ID再去发送网路请求，获取播放音乐的链接
                    var musicPlayUrl=`https://music.aityp.com/song/url?id=${id}`;
                    var res=await axios.get(musicPlayUrl);
                    console.log(res.data.data[0].url)
                    var musicUrl =res.data.data[0].url;
                    console.log(musicUrl);
                    // 5.将MusicURL设置给data
                    this.musicUrl= musicUrl;
                    
                }
            }
        })

    </script>
    <script src="js/animate.js"></script>
</body>
</html>